import React from 'react'
import { Row, Col, Form, Input, Button, Typography, Select } from "antd"
import * as echarts from "echarts"
import { useEffect } from 'react';
import { useRef } from 'react';
import { observer } from 'mobx-react';
import { roleList } from '../../utils/common';
import myinfo from '../mobx/info';


const { Title } = Typography
function Fenxiuser() {
    const { userList, getUserListAsync } = myinfo

    useEffect(() => {

        chartInitOne()
        getUserListAsync({})
        setTimeout(() => {
            chartInitTwo()
        }, 1000)

    }, [])

    const chartOne: any = useRef
    const chartTwo: any = useRef()

    const chartInitTwo = () => {
        var myChart = echarts.init(chartTwo.current);
        var data = roleList.map((item: any) => {
            item.name = item.text
            item.value = userList.filter((v: any) => v.role == item.id).length
            return item;
        })
        console.log(data)
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '人员比例',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                }
            ]
        };

        myChart.setOption(option);
    }

    const chartInitOne = () => {
        var myChart = echarts.init(chartOne.current);

        // 指定图表的配置项和数据  参数配置项 
        var option = {
            title: {
                text: 'WH2110 迟到人数'
            },
            tooltip: {},
            legend: {
                data: ['次数']
            },
            xAxis: {
                data: ['小李', '小王', '小左', '小胡', '小莉', '小艾',]
            },
            yAxis: {},
            series: [
                {
                    name: '次数',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    return (
        <div>
            <Title level={2}> 用户数据分析 </Title>
            <Row >
                <Col span={11} offset={0}>
                    <div className="ebox" ref={chartOne} style={{ padding: 12, width: '100%', height: 440, border: '1px solid #ddd', borderRadius: "10px" }} id="chartone"></div>
                </Col>
                <Col span={11} offset={1}>
                    <div className="ebox" ref={chartTwo} style={{ padding: 12, width: '100%', height: 440, border: '1px solid #ddd', borderRadius: "10px" }} id="charttwo"></div>
                </Col>
            </Row>

        </div>
    )
}


export default observer(Fenxiuser)